<template>
    <div style="height: 100%;">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px" :disabled="disabled">
     <!-- 会议纪要 —— 点击新增后，弹出的弹窗。弹窗中的自定义内容  -->
      <block-panel title="基本信息">
        <one-row>
          <el-form-item label="纪要名称" prop="title">
            <el-input v-model="formData.title" placeholder="请输入纪要名称" :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="关联会议" prop="meet">
            <simple-select :data-list="meetList" v-model="formData.meet" placeholder="请输入纪要名称" :style="{width: '100%'}" :option='{name:"title",value:"id"}' clearable filterable></simple-select>

          </el-form-item>
        </one-row>
        <one-row>
          <el-form-item label="提报单位" prop="dept">
            <dept-select-tree v-model="formData.dept" dept-type="my" :style="{width: '100%'}"
                              placeholder="请选择所属单位" :disabled="disabled"></dept-select-tree>
          </el-form-item>
          <el-form-item label="申请人" prop="alias">
            <el-input v-model="formData.alias" placeholder="请输入申请人" :style="{width: '100%'}" disabled>
            </el-input>
          </el-form-item>
        </one-row>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="formData.remarks" placeholder="请输入备注" :style="{width: '100%'}" :autosize="{ minRows: 4, maxRows:4 }">
          </el-input>
        </el-form-item>
        <el-form-item label="附件" prop="files">
          <my-upload-file v-model="formData.files" :uploadUrl="mUploadFilePath"></my-upload-file>
        </el-form-item>
      </block-panel>

        <block-panel title="会议纪要">
          <el-table
            :data="formData.strip_info"
            size="mini"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="content"
              label="内容">
              <template slot-scope="scope">
                <el-form-item label="" :prop="`strip_info[${scope.$index}].content`" label-width="0" :rules="rules.strip_info.content">
                  <el-input type="textarea" v-model="formData.strip_info[scope.$index].content" placeholder="内容" clearable :style="{width: '100%'}"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="80">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-plus" @click="addLine" v-if="scope.$index==0"
                           size="small"  :disabled="disabled"></el-button>
                <el-button type="text" icon="el-icon-delete" v-else
                           @click="deleteLine(scope.$index)"  :disabled="disabled"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </block-panel>
      </el-form>
    </div>
</template>
<script>
    import BaseDialog from "@/components/Common/BaseDialog";
    import DeptSelectTree from "@/components/Common/DeptSelectTree";
    import ScrollPanel from "../../../components/Common/ScrollPanel";
    import MyUploadFile from "../../../components/Common/MyUploadFile";
    import BlockPanel from "../../../components/Common/BlockPanel";
    import orderMeeting from "@/api/huiyi/orderMeeting/index";
    import {mapGetters} from "vuex";
    import SimpleSelect from "../../../components/Common/SimpleSelect";
    export default {
        name: "LeftForm",
        props: ["row", "disabled"],
        data() {
            return {
                formData: {
                  strip_info: [{content:""}],
                  file: undefined,
                  meet: undefined,
                  user: undefined,
                  dept: undefined,
                  remarks: undefined,
                  title: undefined,
                  alias:undefined
                },
              rules: {
                dept: [{
                  required: true,
                  message: '请输入提报单位',
                  trigger: 'blur'
                }],
                alias: [{
                  required: true,
                  message: '请输入提交人',
                  pattern:/^[\u4e00-\u9fa5]{2,}$/,
                  trigger: 'blur'
                }],
                title: [{
                  required: true,
                  message: '请输入纪要名称',
                  trigger: 'blur'
                }],
                remarks: [{
                  required: true,
                  message: '请输入备注',
                  trigger: 'blur'
                }],
                strip_info: {
                  content: [{
                    required: true,
                    message: '请输入内容',
                    trigger: 'blur'
                  }],
                },
              },
              meetList:[],
              mUploadFilePath:"/api/document/upload_file/",
            }
        },
        components: {
          SimpleSelect,
          BlockPanel,
            MyUploadFile, ScrollPanel, DeptSelectTree,  BaseDialog
        },
        watch: {
        },
        computed: {
          ...mapGetters(["userinfo"]),
        },
        created() {
          this.formData.alias = this.userinfo.alias;
          this.initData()
          this.getHuiyiChoiceList()
        },
        methods: {
          initData() {
            for (let o in this.row) {
              if (this.row[o] != undefined) {
                this.formData[o] = this.row[o]
              }
            }
          },
          getHuiyiChoiceList(){
            orderMeeting.getHuiyiChoiceList({uuid:this.formData.id}).then(res=>{
              this.meetList = res.data
            })
          },
          addLine() {
            this.formData.strip_info.push({content:""})
          },
          deleteLine(index) {
            this.formData.strip_info.splice(index, 1)
          },
          submitForm() {
                let self = this
                return new Promise(function (resolve, reject) {
                    self.$refs['elForm'].validate(valid => {
                        if (!valid) return
                        resolve(self.formData)
                    })
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
  ::v-deep.el-table {
    .el-table__body tbody tr:nth-child(1) td{
      padding-top: 16px;
    }
    .el-table__body tbody th, .el-table__body tbody td{
      padding: 0;
      /*border-bottom: 1px solid #efefef;*/
    }
    .el-table__body tr:hover > td{
      background: none!important;
    }
    .el-form-item {
      /*margin-bottom: 16px;*/
      padding-bottom: 17px;
      margin-bottom: 0!important;
    }
    td {
      border-bottom: none;
      vertical-align:top;
      .cell{
        line-height: 36px;
      }
    }
  }
</style>
